<template>
	<view>
		<view class="liu-tabs" :style="'top:'+top+'rpx;background:'+bgColor+';width:'+width+';height:'+height+'rpx;'">
			<scroll-view class="scroll-box-x" scroll-x="true" :scroll-with-animation="true"
				:scroll-into-view="scrollIntoXView">
				<view class="tab-list">
					<v-tabs v-model="tabIndex"
						activeColor="#FD5052"
						color=" #222222"
						line-height="0" line-radius="0"
						:tabs="tabList" @change="changeTabHandle">
						<view class="tab-title" slot-scope="{ row }">
						  <text>{{ row.title }}</text>  
						</view>
					</v-tabs>
				</view>
			</scroll-view>
			<view v-if="!isShow" class="choose-mess" @click.stop="open">
				<view class="choose-icon sprite sprite-classify"></view>
			</view>
			<view v-if="isShow" class="choose-mess" @click="close">
				<view  class="choose-icon sprite sprite-up"></view>				
			</view>	
		</view>
		<view v-show="isShow" class="separator"></view>
		<view :catchtouchmove="isShow" class="scroll-popup" :style="scrollPopup" v-if="isShow">
			<scroll-view class="scroll-view_H" style="width: 100%;white-space: nowrap;" :scroll-x="true" 
				:scroll-with-animation="true">
				<view class="list-mess">					
					<v-tabs v-model="cateIndex"
						activeColor="#FD5052"
						color="#222222"
						line-height="0" line-radius="0"
						:tabs="categoryList" @change="changeCategoryHandle">
						<view class="tab-title" slot-scope="{ row }">
						  <text>{{ row.name }}</text>  
						</view>
					</v-tabs>
				</view>
			</scroll-view>
		</view>
		<!-- <view v-show="isShow" :catchtouchmove="isShow" @click.stop="close()" class="scroll-mask"></view> -->
		
	</view>
</template>
<script>
	export default {
		props: {
			//菜单数据源
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			categoryList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//菜单栏宽度(rpx、px、%)
			width: {
				type: String,
				default: '100%'
			},
			//菜单栏高度(rpx)
			height: {
				type: Number,
				default: 68
			},
			//菜单栏距顶部距离(rpx)
			top: {
				type: Number,
				default: 0
			},
			//菜单栏背景色
			bgColor: {
				type: String,
				default: '#FFFFFF',
			},
			//主题色
			themeColor: {
				type: String,
				default: '#FD5052',
			},
		},
		computed: {
			scrollPopup() {
				return `margin-top : 10rpx;opacity: ${this.isShow ? 1 : 0};padding-right: 0px;`;
			}
		},
		data() {
			return {
				isShow: false,
				scrollIntoXView: '',
				tabIndex: 0,
				cateIndex: -1,
				paramForm: {
					columnId: undefined,
					cateId: undefined
				}
			};
		},
		methods: {
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
				this.paramForm.cateId = null				
				this.$emit('change', this.paramForm)
			},
			changeTabHandle(index) {
				let columnId = this.tabList[index].id;
				this.paramForm.columnId = columnId;
				if(!this.isShow) {					
					this.paramForm.cateId = null
				}
				this.$emit('change', this.paramForm)
			},
			changeCategoryHandle(index) {
				this.paramForm.cateId = this.categoryList[index].id;
				this.$emit('change', this.paramForm)
			}
		}
	};
</script>
<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss" scoped>
	.liu-tabs {
		position: relative;
		width: 100%;
		overflow: hidden;

		.scroll-box-x {
			width: 100%;
			height: 100%;
			position: relative;
			box-sizing: border-box;
			padding-right: 68rpx;
			white-space: nowrap;

			.tab-list {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.tab-item {
					height: 56rpx;
					padding: 0 20rpx;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
				}
			}
		}

		.choose-mess {
			background-color: #FFFFFF;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.scroll-popup {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		position: relative;
		overflow: hidden;
		z-index: 99999 !important;
		transition: all 0.5s ease 0s;
		opacity: 0;
		padding-right: 68rpx;
		box-sizing: border-box;

		.item-title {
			position: absolute;
			top: 0;
			right: 0;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.list-mess {
			width: 100%;

			.mess-name {
				box-sizing: border-box;
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 20rpx;
				color: #222;
				font-size: 28rpx;
				display: inline-block;
			}
		}
	}

	.scroll-mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998 !important;
		overflow: hidden;
	}

.separator {
  height: 1rpx; /* 分隔线的高度 */
  width: 2000px; /* 分隔线的宽度 */
  background-color: #ccc; /* 分隔线的颜色 */
  margin-top: 6rpx; /* 上下外边距 */
  margin-left: -100px;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;	
}
</style>